<template>
    <div class="bg">
        <!--头部-->
       <div class="header">
          <span class="head-title">武汉从新能源科技有限公司</span>
          <span class="warning"  @click="handleDetail"><span class="w-img"><img src="@/assets/home/warning.png" alt="">预警信息</span>{{ formattedDate }}</span>
       </div>
       <!--内容-->
       <div class="content">
            <div class="left-content">
                <!--左上-->
                <leftTop :region-id="regionId" ref="leftTop"></leftTop>
                <!--左中-->
                <leftCenter :region-id="regionId" ref="leftCenter"></leftCenter>
                <!--左下-->
                <leftBottom :region-id="regionId" ref="leftBottom"></leftBottom>
            </div>
            <div class="center-content">
                <centerContent @update-region-id="handleRegionUpdate" ref="centerContent"></centerContent>
            </div>
            <div class="right-content">
                <!--右上-->
                <rightTop :region-id="regionId" ref="rightTop"></rightTop>
                <!--右中-->
                <rightCenter :region-id="regionId" ref="rightCenter"></rightCenter>
                <!--右下-->
                <rightBottom :region-id="regionId" ref="rightBottom"></rightBottom>
            </div>
       </div>

<!--      <div class="audio-player" v-if="audioFlag" >-->
<!--        <audio id="audio"  autoplay src="@/assets/fire_audio.mp3"></audio>-->
<!--      </div>-->
<!--      这是新的方法，循环+预加载-->
      <audio
          id="fire-audio"
          src="@/assets/fire_audio.mp3"
          preload="auto"
          loop
          muted
          autoplay
          style="display: none;"
      ></audio>

    </div>
</template>
<script>
import leftTop from './components/leftTop'
import leftCenter from './components/leftCenter'
import leftBottom from './components/leftBottom'
import centerContent from './components/centerContent'
import rightTop from './components/rightTop'
import rightCenter from './components/rightCenter'
import rightBottom from './components/rightBottom'
import axios from 'axios';
export default {
  components: {leftTop, leftCenter, leftBottom, centerContent, rightTop, rightCenter, rightBottom},
  data() {
    return {
      audioFlag:false,
      regionId: 100000,
      formattedDate: null,
      manualOpen: false, // 用户是否手动打开
    }
  },
  created() {
    //消防监听的，等会直接打开就行！！！！！！！！！！！！！！！！！！！！！！！！
    setInterval(()=>{
        axios.get(`${this.$httpUrl}openwindow`).then(response => {
          console.log("this.$refs.centerContent.dialogVisible",this.$refs.centerContent.dialogVisible)
      // axios.get(`http://localhost:8080/lay/openwindow`).then(response => {
          if(response.data){
             this.audioFlag=true
            this.unmuteFireAudio(); // 有报警时取消静音
            // 等待 1 秒后再打开弹窗
            setTimeout(() => {
              this.$refs.centerContent.openDetail();
            }, 500); // 500 毫秒 = 0.5 秒

            this.manualOpen = false // 有报警时视为系统强制打开
            this.$refs.centerContent.openDetail()
          }else {
            this.audioFlag = false
            this.muteFireAudio(); // 没有报警时恢复静音
            if (!this.manualOpen) {
              // 只有在不是手动打开的情况下才关闭
              this.$refs.centerContent.dialogVisible = false
            }
          }
        })
    },1000)

    //  如果是未打开，5分钟刷新页面!!!!!!!!!!!
    setInterval(() => {
      if (!this.$refs.centerContent.dialogVisible) {
        console.log('未手动打开，页面自动刷新');
        window.location.reload(); // 刷新整个页面
      }
    }, 300000);

  },
  methods: {
    //这些是音频方法
    unmuteFireAudio() {
      const audio = document.getElementById('fire-audio');
      if (audio && audio.muted) {
        audio.muted = false;
        console.log('已解除静音');
      }
    },

    muteFireAudio() {
      const audio = document.getElementById('fire-audio');
      if (audio && !audio.muted) {
        audio.muted = true;
        console.log('已静音');
      }
    },
    //音频结束
    handleDetail(){
      this.manualOpen = true // 用户手动打开
      this.$refs.centerContent.openDetail()
    },
    handleRegionUpdate(regionId) {
      console.log("当前区域LAYH ID:", regionId);
      this.regionId = regionId; // 更新本地状态
      // 在这里你可以处理区域 ID，比如存储、请求数据等
    }
  },
  mounted() {
    // var audio = document.getElementById('myAudio');
    const audio = document.getElementById('fire-audio'); // 正确 ID
    audio.muted = true; // ✅ 默认静音
    audio.addEventListener('play', function() {
      console.log('音频已开始播放');
    });
    audio.play();
    const today = new Date();
    const year = today.getFullYear(); // 获取年份
    const month = String(today.getMonth() + 1).padStart(2, '0'); // 获取月份，注意要加1并补零
    const day = String(today.getDate()).padStart(2, '0'); // 获取日期，补零

    const formattedDate = `${year}-${month}-${day}`; // 格式化为 YYYY-MM-DD
    this.formattedDate = formattedDate;
    console.log(formattedDate); // 输出格式化后的日期
    console.log("当前区域LAYH ID:", this.regionId); // 直接打印默认值
  }
}
</script>
<style lang="less" scoped>
    .bg{
        background: url(./../../assets/home/bg.png) no-repeat;
        background-size: 100% 100%;
        height: 100%;
    }
    .header{
        position: relative;
        height: 0.8rem;
        line-height: 0.8rem;
        background: url(./../../assets/home/top-bg.png) no-repeat;
        background-size: 100% 100%;
        text-align: center;
        color: #ffffff;
        .head-title{
            font-weight: bold;
            font-size: 0.26rem;
            position: relative;
            top: -0.1rem;
            font-family: cursive;
        }
    }
    .warning{
        margin-left: auto;
        font-size: 12px;
        position: absolute;
        right: 0.1rem;
        top: -0.1rem;
        .w-img{
            color: #51efef;
            margin-right: 0.15rem;
            letter-spacing: 1px;
            cursor: pointer;
            img{
                margin-right: 0.05rem;
            }
        }
    }
    .content{
        height: calc(100vh - 0.8rem);
        display: flex;
        padding: 0 0.1rem;
        .left-content{
            width: 25%;
        }
        .center-content{
            width: 50%;
            margin-left: 0.1rem;
        }
        .right-content{
            width: 25%;
            margin-left: 0.1rem;
        }
    }
</style>
